<html>
	<head>
		<base href="http://www.baidu.com" />
		<meta charset="utf-8" />
	</head>
	<body>
		<div id="firstdiv"><p>这是第一个p</p></div>
		<div  id="twodiv">
			<p>这是第一个div</p>
			<p>这是第二个div</p>
			<p>这是第三个div</p>
		</div>
		<div class="samenodetest"></div>
		<div class="samenodetest"></div>
		
		<div id="parentnode">
			<p  id="onep">父节点的第一个段落</p>
			<p  id="twop">父节点的第二个段落</p>
			<p  id="threep">父节点的第三个段落</p>
			<p  id="fourp">父节点的第四个段落</p>
			<p id="fivep">父节点的第五个段落</p>
		</div>
		
		<hr/>
		<hr/>
		<hr/>
				
		<div  id="samegradetest">
			<p id="one">这是第一个同级测试p</p>
			<p id="two">这是第二个同级测试p</p>
			<p id="three">这是第三个同级测试p</p>
			<p id="four">这是第四个同级测试p</p>
		</div>
		
		<div id="positioncompare">
			<p  id="oneposition">这是第一个位置</p>
			<p  id="twoposition">这是第二个位置</p>
			<p  id="threeposition">这是第三个位置</p>
		</div>
	</body>
	
	<script type="text/javascript">
		
		var firstdiv=document.getElementById("firstdiv");
		var twodiv=document.getElementById("twodiv");
		
		//比较innerText和textcontent的区别
		var firstdivinnertext=firstdiv.innerText;
		var firstdivtextcontent=firstdiv.textContent;
		console.log("firstdivinnertext"+firstdivinnertext);
		console.log("firstdivtextcontent="+firstdivtextcontent);
		var seconddivinnertext=twodiv.innerText;
		
		var seconddivtextcontent=twodiv.textContent;
		console.log("seconddivinnertext="+seconddivinnertext);
		console.log("seconddivtextcontent="+seconddivtextcontent);
		
		//比较子节点和子元素的区别
		var firstdivchildnode=firstdiv.firstChild;
		var firstdivchildelement=firstdiv.firstElementChild;
		console.log("firstdivchildnode="+firstdivchildnode);
		console.log("firstdivchildelement="+firstdivchildelement);
		var seconddivchildnode=twodiv.firstChild;
		var seconddivchildelement=twodiv.firstElementChild;
		console.log("seconddivchildnode="+seconddivchildnode);//是空文本节点
		console.log("seconddivchildelement="+seconddivchildelement);//是元素节点对象
		
		//判断节点对象是一样的还是相等的
		var samenodetest=document.getElementsByClassName("samenodetest");
		var zeroisequalone=samenodetest[0].isEqualNode(samenodetest[1]);
		var zeroissameone=samenodetest[0].isSameNode(samenodetest[1]);
		var zeroissamezero=samenodetest[0].isSameNode(samenodetest[0]);
		console.log("zeroisequalone="+zeroisequalone);
		console.log("zeroissameone="+zeroissameone);
		console.log("zeroissamezero="+zeroissamezero);
		
		
		//父节点添加或者是移除子节点
		var parentnode=document.getElementById("parentnode");
		var pnodeone=document.createElement("p");
		var pnodetwo=document.createElement("p");
		var pnodethree=document.createElement("p");
		var pnodefour=document.createElement("p");
		var textnodeone=document.createTextNode("这是第一个新添加的p");
		var textnodetwo=document.createTextNode("这是第二个新添加的p");
		var textnodethree=document.createTextNode("这是第三个新添加的p");
		var textnodefour=document.createTextNode("这个节点去替换第二个p");
		pnodeone.appendChild(textnodeone);
		pnodetwo.appendChild(textnodetwo);
		pnodethree.appendChild(textnodethree);
		pnodefour.appendChild(textnodefour);
		parentnode.append(pnodeone);//添加到最后一个节点的后面
		parentnode.appendChild(pnodetwo);//添加到最后一个节点的后面
		parentnode.prepend(pnodethree);//添加到第一个子节点的前面
		var onep=document.getElementById("onep");
		parentnode.removeChild(onep);//移除onep
		var pnodefive=document.createElement("p");
		var beforefivetextnode=document.createTextNode("在第五个段落之前插入的段落");
		pnodefive.appendChild(beforefivetextnode);
		var fivep=document.getElementById("fivep");
		parentnode.insertBefore(pnodefive,fivep);//在第五个段落之前插入
		var twop=document.getElementById("twop");
		parentnode.replaceChild(pnodefour,twop);//用新的节点去替换twop节点
		console.log("节点的父节点="+parentnode.parentNode);
		console.log("节点的父元素="+parentnode.parentElement);
		console.log("节点名称="+parentnode.nodeName);
		console.log("节点类型="+parentnode.nodeType);	
		
		
		
		
		
		
		
		//同级节点前或者是后插入节点
		var one=document.getElementById("one");
		var samepone=document.createElement("p");
		var sametextone=document.createTextNode("这是第一个同级p");
		samepone.appendChild(sametextone);
		var sametwo=document.createElement("p");
		var sametwotext=document.createTextNode("这是第二个同级p");
		sametwo.appendChild(sametwotext);
		one.before(samepone);//在one节点元素前面插入一个节点
		one.after(sametwo);//在one节点元素后面插入一个节点
		var replacep=document.createElement("p");
		var replacetextnode=document.createTextNode("这是替换第一个同级测试p的节点");
		replacep.appendChild(replacetextnode);
		one.replaceWith(replacep);
		
		
		//清除空的文本节点将相邻的文本节点合并成一个文本节点
		var newpnode=document.createElement("p");
		var textnode=document.createTextNode("这是第一个");
		var textnodetwo=document.createTextNode("这是第二个");
		newpnode.appendChild(textnode);
		newpnode.appendChild(textnodetwo);
		console.log("length="+newpnode.childNodes.length);
		newpnode.normalize();
		console.log("length="+newpnode.childNodes.length);
		
		
		//获取当前节点的根节点，不同节点之间的位置比较
		var oneposition=document.getElementById("oneposition");
		var twoposition=document.getElementById("twoposition");
		var onepositionrootnode=oneposition.getRootNode();  //获取当前节点的根节点
		console.log("onepositionrootnode="+onepositionrootnode);
		var result=oneposition.compareDocumentPosition(twoposition); //比较两个节点的位置
		console.log("result="+result);
		/*
		二进制值	十进制值	含义
		000000	0	两个节点相同
		000001	1	两个节点不在同一个文档（即有一个节点不在当前文档）
		000010	2	参数节点在当前节点的前面
		000100	4	参数节点在当前节点的后面
		001000	8	参数节点包含当前节点
		010000	16	当前节点包含参数节点
		100000	32	浏览器内部使用
		*/
		
		/*
		文档节点（document）：9，对应常量Node.DOCUMENT_NODE
		元素节点（element）：1，对应常量Node.ELEMENT_NODE
		属性节点（attr）：2，对应常量Node.ATTRIBUTE_NODE
		文本节点（text）：3，对应常量Node.TEXT_NODE
		文档片断节点（DocumentFragment）：11，对应常量Node.DOCUMENT_FRAGMENT_NODE
		文档类型节点（DocumentType）：10，对应常量Node.DOCUMENT_TYPE_NODE
		注释节点（Comment）：8，对应常量Node.COMMENT_NODE
		*/
		
		
	</script>
	
	<script type="text/javascript">
		
		
	</script>
</html>